<%--
  Created by IntelliJ IDEA.
  User: mona
  Date: 2020/6/1
  Time: 9:26
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>汽车基本信息</title>
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" href="../element-ui/element.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/cln/css/engine.css">
</head>
<body>
<script src="../../vue/vue.js"></script>
<script src="../../vue/vue.min.js"></script>
<script src="../element-ui/element.js"></script>
<script src="../../jquery/jquery-3.4.1.js"></script>
<div id="app">
    <template>
        <div class="pro">
            <%--
                :header-cell-style="thStyleFun"  表头样式
                :cell-style="cellStyleFun"  每一个单元格样式
             --%>
            <el-table :data="list" style="width: 100%;margin: 0 auto;" :header-cell-style="thStyleFun"
                      :cell-style="cellStyleFun">
                <el-table-column label="基本参数id" prop="baseId" width="110px"></el-table-column>
                <el-table-column label="级别" prop="carlevel" width="100px"></el-table-column>
                <el-table-column label="油耗" prop="oilConsumption" width="120px"></el-table-column>
                <el-table-column label="排量" prop="displacement" width="70px"></el-table-column>
                <el-table-column label="质保" prop="quality" width="140px"></el-table-column>
                <el-table-column label="变速箱" prop="gearbox" width="140px"></el-table-column>
                <el-table-column label="发动机id" prop="eId" width="90px"></el-table-column>
                <el-table-column label="变速箱id" prop="gId" width="90px"></el-table-column>
                <el-table-column align="right">
                    <template slot="header" slot-scope="scope">
                        <el-button @click="dialogFormVisible = true">添加信息</el-button>
                    </template>
                    <template slot-scope="scope">
                        <el-button size="mini" @click="showBase(scope.row)">Edit</el-button>
                        <el-button size="mini" type="danger" @click="deleteBase(scope.$index, scope.row)">Delete
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageNum"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <!--添加信息弹框-->
            <el-dialog title="添加信息" :visible.sync="dialogFormVisible" width="30%">
                <el-form :model="{form}">
                    <el-form-item label="级别" :label-width="formLabelWidth">
                        <el-input v-model="form.carlevel"></el-input>
                    </el-form-item>
                    <el-form-item label="油耗" :label-width="formLabelWidth">
                        <el-input v-model="form.oilConsumption" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="排量" :label-width="formLabelWidth">
                        <el-input v-model="form.displacement" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="质保" :label-width="formLabelWidth">
                        <el-input v-model="form.quality" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="变速箱" :label-width="formLabelWidth">
                        <el-input v-model="form.gearbox" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="发动机编号" :label-width="formLabelWidth">
                        <el-input v-model="form.eId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="变速箱编号" :label-width="formLabelWidth">
                        <el-input v-model="form.gId" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="onSubmit">确 定</el-button>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                </div>
            </el-dialog>

            <!--修改信息弹框-->
            <!--:model需要的是object型，若model报错，可以加个{}-->
            <el-dialog title="修改信息" :visible.sync="dialogFormVisible1" width="30%">
                <el-form :model="{getlist}">
                    <el-form-item label="级别" :label-width="formLabelWidth">
                        <el-input v-model="getlist.carlevel"></el-input>
                    </el-form-item>
                    <el-form-item label="油耗" :label-width="formLabelWidth">
                        <el-input v-model="getlist.oilConsumption"></el-input>
                    </el-form-item>
                    <el-form-item label="排量" :label-width="formLabelWidth">
                        <el-input v-model="getlist.displacement"></el-input>
                    </el-form-item>
                    <el-form-item label="质保" :label-width="formLabelWidth">
                        <el-input v-model="getlist.quality"></el-input>
                    </el-form-item>
                    <el-form-item label="变速箱" :label-width="formLabelWidth">
                        <el-input v-model="getlist.gearbox"></el-input>
                    </el-form-item>
                    <el-form-item label="发动机编号" :label-width="formLabelWidth">
                        <el-input v-model="getlist.eId"></el-input>
                    </el-form-item>
                    <el-form-item label="变速箱编号" :label-width="formLabelWidth">
                        <el-input v-model="getlist.gId"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="editBase">确 定</el-button>
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                </div>
            </el-dialog>
        </div>
    </template>
</div>
</body>
<script>
    var Main = {
        data() {
            return {
                list: [],
                getlist: [],
                search: '',
                dialogFormVisible: false,
                dialogFormVisible1: false,
                form: {
                    eDisplacement: '',
                    eInlet: '',
                    eCtype: '',
                    eCnum: '',
                },
                formLabelWidth: '120px',
                total: 1,//总条数  默认值不能为空
                pageSize: 6,//每页显示几条数据
                pageNum: 1,//当前页
                pages: 1,//总页数
                startRow: '',//起始页
                endRow: '',//结束页
                fileList: [],//上传文件列表
                formdata: new FormData(),
                // actionPath:'http(s)://upload.qiniup.com',//上传到七牛云的地址
                imageUrl: '',//上传图片的地址,
                imgName: '',//返回的图片名称
                baseId: ''
            }
        },
        created() {
            this.getBase();
        },
        methods: {
            // 获取发动机
            getBase() {
                var _this = this
                $.ajax({
                    type: 'get',
                    url: '/forum/base/selectAllBase',
                    dataType: 'json',
                    data: "pageNum=" + this.pageNum + "&pageSize=" + this.pageSize,
                    success: function (data) {
                        console.log(data.data)
                        if (data.state === '200') {
                            _this.list = data.data.list;
                            _this.getlist = data.data.list;
                            _this.pageNum = data.data.pageNum;//当前页码
                            _this.total = data.data.total;//总条数
                            _this.pages = data.data.pages;//总页数
                        }
                    }
                })
            },
            thStyleFun() {
                return 'text-align:center'
            },
            cellStyleFun() {
                return 'text-align:center'
            },

            //删除信息
            deleteBase(index, row) {
                var that = this;
                console.log(index, row);
                $.ajax({
                    method: 'post',
                    url: '/forum/base/deleteBase',
                    data: {
                        baseId: row.baseId,
                    },
                    success: function (data) {
                        if (data.state === '200') {
                            console.log(data);
                            that.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            window.location.reload();
                        } else {
                            that.$message.error('删除失败');
                        }
                    }
                })
            },
            //element行点击方法  获取该行数据
            showBase(row) {
                var _this = this;
                _this.dialogFormVisible1 = true;
                _this.baseId = row.baseId;
                console.log(_this.baseId)
                _this.getlist = row;
            },
            //添加 （表单提交）
            onSubmit() {
                var _this = this;
                _this.dialogFormVisible = false;
                console.log("表单提交了！", _this.form);
                _this.addBase();
            },
            //添加信息
            addBase() {
                var _this = this;
                // console.log(this.form.brand)
                $.ajax({
                    method: 'post',
                    url: '/forum/base/insertBase',
                    data: {
                        baseId:_this.baseId,
                        carlevel: _this.form.carlevel,
                        oilConsumption: _this.form.oilConsumption,
                        displacement: _this.form.displacement,
                        quality: _this.form.quality,
                        gearbox: _this.form.gearbox,
                        eId: _this.form.eId,
                        gId: _this.form.gId
                    },
                    success: function (data) {
                        // console.log(data)
                        if (data.state === '200') {
                            _this.dialogFormVisible = false;
                            _this.$message({
                                message: "添加成功",
                                type: "success"
                            });
                            window.location.reload();
                        } else {
                            _this.$message.error('添加失败');
                        }
                    }
                })
            },
            //修改信息
            editBase() {
                var that = this;
                $.ajax({
                    method: 'post',
                    url: '/forum/base/updateBase',
                    data: {
                        baseId:that.baseId,
                        carlevel: that.getlist.carlevel,
                        oilConsumption: that.getlist.oilConsumption,
                        displacement: that.getlist.displacement,
                        quality: that.getlist.quality,
                        gearbox: that.getlist.gearbox,
                        eId: that.getlist.eId,
                        gId: that.getlist.gId
                    },
                    success: function (data) {
                        console.log(data)
                        if (data.state === '200') {
                            that.dialogFormVisible1 = false;
                            that.$message({
                                message: "修改成功",
                                type: "success"
                            });
                        } else {
                            that.$message.error('修改失败');
                        }
                    }
                })
            },
            //每页显示几条
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.getBase()
            },
            //当前页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getBase()
            }
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount("#app");
</script>
</html>
